<script setup lang="ts">
import { ref } from 'vue';
const chart = ref('')
const msg = ref('')

const websocket = new WebSocket('ws://localhost:3000')
websocket.onopen = function () {
    console.log(websocket.readyState);
}

function send(): void {
    const text = chart.value
    console.log(localStorage.getItem('user'));
    const str = `{"text":"${text}","user":"${localStorage.getItem('user')}"}`
    websocket.send(str)
    chart.value = ''
}



websocket.onmessage = function (back) {
    console.log(back.data);
    
    const {msg:item} = JSON.parse(back.data)
    const {len:user} = JSON.parse(back.data)
    msg.value += `<div class="chart${user}">${item}</div>`
}
</script>
<template>
    <div class="box">
        <div class="box2">
            <div class="header">
                <div class="span">
                    <span class="iconfont icon-zuojiantou"></span>
                </div>
                <div class="name">
                    <div>
                        <p>小垃圾</p>
                        <p class="small">1234人在线</p>
                    </div>
                </div>
                <div class="text-right">
                    <span class="iconfont icon-daka"></span>
                    <span class="iconfont icon-caidan"></span>
                </div>
            </div>
            <div class="content"></div>
            <div class="footer"></div>
            <div class="chartcon" v-html="msg"></div>
            <div class="haha">
                <div>
                    <input type="text" v-model="chart" />
                    <button @click="send">发送</button>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss">
.chartzhangsan{
    background-color: aqua;
}
.chartlisi{
    background-color: red;
}
.box {
    background-image: url("/images/1322304adf481ff1b45eaea979e0fe2c.jpeg");
    background-repeat: no-repeat;
    background-position: 0 20px;
    background-size: cover;
    height: 100%;
}
.box2 {
    background-color: rgba(57, 71, 102, 0.8);
    height: 100%;
}
.header {
    display: flex;
    position: relative;
    height: 40px;
    background-color: #000;
    justify-content: space-between;
}
.header .span {
    display: flex;
    justify-content: center;
    align-items: center;
}
.header .span span {
    margin-left: 10px;
    font-size: 18px;
    font-weight: 700;
}
.header .name {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
}
.header .name div {
    text-align: center;
}
.text-right {
    display: flex;
    justify-content: center;
    align-items: center;
}
.text-right span:nth-of-type(1) {
    display: inline-block;
    margin-right: 10px;
    font-size: 20px;
}
.text-right span:nth-of-type(2) {
    display: inline-block;
    margin-right: 10px;
    font-size: 24px;
}
.small {
    font-size: 12px;
    transform: scale(0.75);
}
.input {
    position: fixed;
    bottom: 55px;
    width: 100%;
}
.chartcon {
    width: 100%;
    height: 400px;
}

.haha {
    width: 100%;
    display: flex;
    flex-direction: column;
    position: fixed;
    bottom: 80px;
}
.haha input {
    flex: 1;
    border-radius: 25px;
    background-color: rgba(192, 149, 83, 0);
    border: 2px solid rgba(192, 149, 83, 1);
    margin-left: 5px;
    outline: none;
    font-size: 18px;
    padding-left: 10px;
}
.haha button {
    width: 80px;
    border-radius: 25px;
    background-color: rgba(192, 149, 83, 0.6);
    color: #ccc;
    margin: 0 5px;
    border: none;
}
</style>
